<template>
  <div class="home">
    <div id="h_top">
      <imap ></imap>
    </div>
    <div id="h_sear">
      <search></search>
    </div>
    <div id="h_content">
      <inav></inav>
      <lunbotu></lunbotu>
      <div>
        <el-row  :gutter="20">
          <el-col :span="6"  v-for="(item,index) in items1" :key="index">
          <div class="grid-content bg-purple-dark">
                    <goods1
                      :ids="item.id"
                      :img="item.img"
                      :def="item.def"
                      :content="item.content"
                      @click="goods1($event)"
                      ></goods1>
          </div>
          </el-col>
      </el-row>
         
      </div>
      <div>
      <el-row  :gutter="20">
        <el-col :span="6"  v-for="(item,index) in items2"
              :key="index"><div class="grid-content bg-purple-dark">
            <goods2
              :ids="item.id"
              :img="item.img"
              :def="item.def"
              :content="item.content"></goods2>
          </div></el-col>

      </el-row>
        
      </div>
      这里是 中间页面</div>
    <div id="h_bott">
      <ibot></ibot>
    </div>
    
  </div>
</template>

<script>
import imap from "@/components/lxc/imap.vue";
import search from "@/components/lxc/search.vue";
import ibot from "@/components/lxc/ibot.vue";
import inav from "@/components/lxc/nav.vue";
import lunbotu from "@/components/lxc/lunbtu.vue";
import goods1 from "@/components/lxc/goodsk1.vue";
import goods2 from "@/components/lxc/goodsk2.vue";

import axios from "axios";

// import axios from "axios";      
export default {
  name: 'home',
  components: {
    imap: imap,
    search:search,
    ibot:ibot,
    lunbotu:lunbotu,
    inav:inav,
    goods1:goods1,
    goods2:goods2,
  },
  data() {
    return {
      items1:[
        {id:1,img:'require("../../assets/img/1/yr.png")',def:0,content:'牛排'},
        {id:2,img:'/img/yr.1ffa501c.png'},
        {id:3,img:"../../assets/img/1/yr.png"},
        {id:4,img:'../img/yr.1ffa501c.png'}],
      items2:[
        {id:1,img:'require("../../assets/img/1/yr.png")',def:0,content:'牛排'},
        {id:2,img:''},
        {id:3,img:'require("../../assets/img/1/yr.png")'},
        {id:4,img:'require("../../assets/img/1/yr.png")'},
        {id:5,img:'require("../../assets/img/1/yr.png")'},
        {id:6,img:'require("../../assets/img/1/yr.png")'},
        {id:7,img:'require("../../assets/img/1/yr.png")'},
        {id:8,img:'require("../../assets/img/1/yr.png")'}]
    }
  },
  methods:{
  },
  watch: {
  },
  // 生命周期函数
   mounted() {
    
     if(localStorage.userid){
       window.console.log('+++');
        var url = "http://localhost:3000";
        axios.post(url + "/login/userall",{id:localStorage.userid})
            .then(response => {
              window.console.log(response)
            })
            .then(() => {
            });
     }




  }
}
</script>
<style>
  html,body{
    width: 100%;
  }
#h_top,#h_sear,#h_content,#h_bott{
  float: left;
  width: 100%;
  overflow: hidden;
}


.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
    margin-top:20px;  
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
